<template>
  <el-form :label-position="labelPosition" label-width="105px">
    <!--        :model="formLabelAlign"-->
    <el-form-item label="用户工号">
      <el-input v-model="userData.userNum" :disabled="true" @change="handleChange"></el-input>
    </el-form-item>
    <el-form-item label="用户姓名">
      <el-input v-model="userData.userName" :disabled="true" @change="handleChange"></el-input>
    </el-form-item>
    <el-form-item label="区域块选择">
      <div class="groupSelect">
        <el-tree v-if="updateData" :data="groupList" :props="defaultProps" show-checkbox accordion node-key="key"
                 :default-checked-keys="checkedKey" @check-change="handleCheckChange"
                 @node-click="handleNodeClick"></el-tree>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
  import axios from 'axios'

  export default {
    props: {
      checkType: String,
      modifyData: Object
    },
    data () {
      return {
        updateData: false,
        labelPosition: 'left',
        // campusId: 0,
        // buildingId: 0,
        // floorId: 0,
        blockId: '',
        blockIds:[],
        userData: {
          userNum: '',
          userName: '',
          roleId: '',
          blockIds: []
        },
        groupList: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        checkedKey: [],
        // roomId: [],
      }
    },
    methods: {
      // getRoomsByBlock(id){
      //   // console
      //   let self = this
      //   if(id == null){
      //     return false
      //   }
      //   $.ajax({
      //     type: 'GET',
      //     url: this.api+'rooms',
      //     async: false,
      //     headers: {'X-Requested-With': 'XMLHttpRequest'},
      //     xhrFields: {withCredentials: true},
      //     data: {'blockId': id},
      //     success(data){
      //       if(data.length===0){
      //         return false
      //       }
      //       for(let i = 0; i < data.length; i++){
      //         // console.log('123/'+self.groupList[i].id)
      //         if(id === self.groupList[i].id){//判断正确区域块
      //           let blocks = self.groupList
      //           self.groupList[i].children = data
      //           for (let j = 0; j < data.length; j++) {
      //             let num = j + 1
      //             let key = self.groupList[i].key + '-' + num
      //             self.groupList[i].children[j].code = 1//房间
      //             self.groupList[i].children[j].key = key//唯一id
      //             if (self.roomId.length != 0) {
      //               //如果roomId不为空说明是修改
      //               for (let r = 0; r < self.roomId.length; r++) {
      //                 if (self.roomId[r] === blocks[i].children[j].id) {
      //                   // 将唯一的key存入
      //                   // console.log('childrenKeyIf='+blocks[i].children[j].key)
      //                   self.checkedKey.push(blocks[i].children[j].key)
      //                   // console.log('checkedKey='+self.checkedKey[0])
      //                   self.checkedKey = Array.from(new Set(self.checkedKey))
      //                   console.log(self.checkedKey)
      //                 }else {
      //                   console.log('~~~~~~')
      //                 }
      //               }
      //             }
      //           }
      //         }
      //       }
      //     }
      //   })
      // },

      // getCampuses () {
      //   let self = this
      //   $.ajax({
      //     type: 'GET',
      //     async: false,
      //     url: this.api + 'schoolZones',
      //     headers: {
      //       'X-Requested-With': 'XMLHttpRequest'
      //     },
      //     xhrFields: {
      //       withCredentials: true
      //     },
      //     success (data) {
      //       if (data.length === 0) {
      //         return false
      //       } else {
      //         self.groupList = data
      //         for (let i = 0; i < data.length; i++) {
      //           self.groupList[i].code = 0//证明是校区
      //           self.groupList[i].key = i + 1//唯一id
      //           self.getBuildings(data[i].id)
      //         }
      //       }
      //     }
      //   })
      // },
      //
      // getBuildings (id) {
      //   let self = this
      //   $.ajax({
      //     type: 'GET',
      //     async: false,
      //     url: this.api + 'buildings',
      //     headers: {
      //       'X-Requested-With': 'XMLHttpRequest'
      //     },
      //     xhrFields: {
      //       withCredentials: true
      //     },
      //     data: {'zoneId': id},
      //     success (data) {
      //       if (data.length === 0) {
      //         return false
      //       } else {
      //         for (let i = 0; i < self.groupList.length; i++) {
      //           if (id === self.groupList[i].id) {
      //             self.groupList[i].children = data
      //             for (let j = 0; j < data.length; j++) {
      //               let num = j + 1
      //               let key = self.groupList[i].key + '-' + num
      //               self.groupList[i].children[j].code = 1//楼栋
      //               self.groupList[i].children[j].key = key//唯一id
      //             }
      //           }
      //         }
      //         for (let j = 0; j < data.length; j++) {
      //           self.getFloors(id, data[j].id)
      //         }
      //       }
      //     }
      //   })
      // },
      //
      // getFloors (campusId, buildingId) {
      //   let self = this
      //   $.ajax({
      //     type: 'GET',
      //     async: false,
      //     url: this.api + 'buildings/' + buildingId + '/floors',
      //     headers: {
      //       'X-Requested-With': 'XMLHttpRequest'
      //     },
      //     xhrFields: {
      //       withCredentials: true
      //     },
      //     success (data) {
      //       if (data.length === 0) {
      //         return false
      //       } else {
      //         for (let i = 0; i < self.groupList.length; i++) {
      //           if (campusId === self.groupList[i].id) {// 判断正确校区
      //             let building = self.groupList[i].children
      //             for (let j = 0; j < building.length; j++) {// 判断正确楼栋
      //               if (buildingId === building[j].id) {
      //                 building[j].children = []
      //                 for (let f = 1; f <= data; f++) {
      //                   let key = building[j].key + '-' + f
      //                   building[j].children.push({name: f + '层', children: [], code: 2, key: key})//层
      //                 }
      //                 self.getClassroom(campusId, buildingId)
      //               }
      //             }
      //           }
      //         }
      //       }
      //     }
      //   })
      // },
      //
      // getClassroom (campusId, buildingId) {
      //   let self = this
      //   for (let i = 0; i < self.groupList.length; i++) {
      //     if (campusId === self.groupList[i].id) {// 判断正确校区
      //       let building = self.groupList[i].children
      //       for (let j = 0; j < building.length; j++) {
      //         if (buildingId === building[j].id) {// 判断正确楼栋
      //           for (let f = 1; f <= building[j].children.length; f++) {
      //             $.ajax({
      //               type: 'GET',
      //               async: false,
      //               url: this.api + 'rooms/' + buildingId + '/' + f,
      //               headers: {
      //                 'X-Requested-With': 'XMLHttpRequest'
      //               },
      //               xhrFields: {
      //                 withCredentials: true
      //               },
      //               success (data) {
      //                 if (data.length === 0) {
      //                   return false
      //                 } else {
      //                   building[j].children[f - 1].children = data
      //                   for (let c = 0; c < data.length; c++) {
      //                     let num = c + 1
      //                     let key = building[j].children[f - 1].key + '-' + num
      //                     building[j].children[f - 1].children[c].code = 3
      //                     building[j].children[f - 1].children[c].key = key
      //                     if (self.roomId.length !== 0) {
      //                       //如果roomId不为空说明是修改
      //                       for (let r = 0; r < self.roomId.length; r++) {
      //                         if (self.roomId[r] === building[j].children[f - 1].children[c].id) {
      //                           // 将唯一的key存入
      //                           self.checkedKey.push(building[j].children[f - 1].children[c].key)
      //                           self.checkedKey = Array.from(new Set(self.checkedKey))
      //                           console.log(self.checkedKey)
      //                         }
      //                       }
      //                     }
      //                   }
      //                 }
      //               }
      //             })
      //           }
      //         }
      //       }
      //     }
      //   }
      // },

      getBlocks(){
        console.log('_-_'+this.userData.blockIds)
        let self = this
        console.log('-_-'+self.checkedKey)
        $.ajax({
          type: 'GET',
          async: false,
          url: this.api + `block/getBlocks/${self.userData.userNum}`,
          headers: {'X-Requested-With':'XMLHttpRequest'},
          xhrFields: {withCredentials: true},
          success(data){
            self.groupList = data
            for (let i = 0; i < data.length; i++) {
              self.groupList[i].code = 0//证明是区域块
              self.groupList[i].key = i + 1//唯一id
              // console.log('123+'+data[i].id)
              if(self.blockIds.length != 0){
                for(let j = 0;j < self.blockIds.length; j++){
                  if(self.blockIds[j] === self.groupList[i].id){
                    self.checkedKey.push(self.groupList[i].key)
                    // self.checkedKey = Array.from(new Set(self.checkedKey))
                    console.log('Id'+self.blockIds[j])
                    console.log('KEY'+self.groupList[i].key)
                  }
                }
              }
            }
          }
        })
      },

      handleCheckChange(data, checked, indeterminate){//其中参数checked代表节点是否被全选，indeterminate代表所选节点状态为有选中但未被全选
        let self = this
        console.log(data,checked)
        self.getBlockIds(data,checked,indeterminate)
        // if(data.code === 0){//区域块
        //   self.blockId = data.id
        //   $.ajax({
        //     type: 'GET',
        //     url: this.api+`devices/blockId/${data.id}`,
        //     async: false,
        //     headers: {'X-Requested-With': 'XMLHttpRequest'},
        //     xhrFields: {withCredentials: true},
        //     success(data){
        //       self.getBlockIds(checked,indeterminate,data)
        //     }
        //   })
        // }
        // else if(data.code === 1){//房间
        //   $.ajax({
        //     type: 'GET',
        //     url: this.api+`devices/blockId/${self.blockId}/${data.id}`,
        //     async: false,
        //     headers: {'X-Requested-With': 'XMLHttpRequest'},
        //     xhrFields: {withCredentials: true},
        //     success(data){
        //       self.getDeviceId(checked,indeterminate,data)
        //     }
        //   })
        // }
      },

      getBlockIds(data, checked, indeterminate){
          console.log(data.id)
          if (checked === true) {
            this.userData.blockIds.push(data.id)
            // console.log('~~~~~'+this.userData.blockIds)
          }else if (checked === false){
            console.log('~~~'+this.userData.blockIds)
            for (let j = 0; j < this.userData.blockIds.length; j++) {
              console.log('~~~~'+this.userData.blockIds[j])
              if (data.id === this.userData.blockIds[j]) {
                this.userData.blockIds.splice(j, 1)
                console.log('~~'+this.userData.blockIds)
              }
            }
          }
        console.log('测试:'+this.checkType)
        this.$emit('getModifyData',this.userData)
      },

      // getDeviceId (checked, indeterminate, data) {
      //   if (checked === true) {//本身被选中
      //     for (let i = 0; i < data.list.length; i++) {
      //       this.userData.deviceId.push(data.list[i].id)
      //     }
      //     this.userData.deviceId = Array.from(new Set(this.userData.deviceId))
      //     console.log(this.userData.deviceId)
      //   } else if (checked === false && indeterminate === true) {
      //     return false
      //   } else if (checked === false && indeterminate === false) {
      //     console.log(this.userData.deviceId)
      //     if (this.userData.deviceId.length !== 0) {
      //       for (let i = 0; i < data.list.length; i++) {
      //         for (let j = 0; j < this.userData.deviceId.length; j++) {
      //           if (data.list[i].id === this.userData.deviceId[j]) {
      //             this.userData.deviceId.splice(j, 1)
      //           }
      //         }
      //       }
      //     }
      //   }
      //   console.log('测试:'+this.checkType)
      //   if (this.checkType === 'Add') {
      //     this.$emit('getNewData', this.userData)
      //   } else {
      //     this.$emit('getModifyData', this.userData)
      //   }
      // },

      handleChange () {
        console.log(this.checkType)
        if (this.checkType === 'Add') {
          this.$emit('getNewData', this.userData)
        } else {
          this.$emit('getModifyData', this.userData)
        }
      },

      handleNodeClick (data) {
        console.log(data)
        if (data.code === 0) {
          this.blockId = data.id
        }
      },

      clearData () {
        this.userData = {
          userNum: '',
          userName: '',
          roleId: '',
          blockIds: []
        }
        this.blockIds = []
        this.checkedKey = []
        this.updateData = false
        console.log("--"+this.checkedKey + "this.checkedKey")
      }
    },
    mounted () {
      // if (this.checkType === 'Add') {
      //   this.updateData = true
        this.getBlocks()
      // }
    },
    watch: {
      groupList (newVal) {
        console.log(newVal)
      },

      modifyData (newVal) {
        let type = typeof newVal
        if (type === 'object') {
          this.userData.userNum = newVal.id
          this.userData.userName = newVal.name
          this.userData.roleId = newVal.roleId
          for(let j = 0; j < newVal.blocks.length; j++){
            this.userData.blockIds.push(newVal.blocks[j].id)
            // console.log("1")
            this.blockIds.push(newVal.blocks[j].id)
          }
          this.updateData = true
          this.getBlocks()
        } else {
          console.log('~~~~~')
        }
      }
    }
  }
</script>

<style scoped>
  .el-form {
    margin: 10px auto;
    width: 300px;
    height: 400px;
  }

  .el-form-item {
    margin-bottom: 8px;
  }

  .el-form >>> .el-form-item__label {
    font-size: 18px;
  }

  .el-form >>> .el-input__inner {
    height: 32px;
    border: 1px solid #BBB;
  }

  .groupSelect {
    width: 100%;
    height: 275px;
    overflow-y: auto;
    border-radius: 5px;
    border: 1px solid #BBB;
  }

  .el-tree {
    padding: 0;
  }

  .el-tree >>> .el-tree-node__content {
    border-bottom: 1px solid #BBBBBB;
  }
</style>
